<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <!-- 3.使用组件 -->
        <my-component></my-component>
        <my-header></my-header>
    </div>
    <div id="box2">
        <my-header></my-header>
    </div>
    <!-- 2.定义模板信息(组件内容过多时) -->
    <template id="myT">
        <!-- 注意点：只能有一个root根节点 -->
        <div>
            组件内容2 - msg:{{msg}}
            <div>
                测试内容
                <img src="./images/cart.jpg" @click="fn" alt="">
            </div>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        // 全局组件
        Vue.component("my-component",Vue.extend({template:'<div>组件内容</div>'}))
        // 自调用 Vue.extend()
        Vue.component("my-component",{template:"<div>组件内容</div>"})
        Vue.component("my-component",{
            template:"#myT",
            data(){
                return{
                    msg:"hello"
                }
            },
            methods:{
                fn(){
                    console.log("这里是组件内的fn");
                }
            }
        });
        // 如果命名为驼峰命名，在使用的时候需要-拼接
        Vue.component("myHeader",{template:"<header>myheader</header>"})
        let vm = new Vue({
            el:'#box',
            data:{

            }
        })
        let vm2 = new Vue({
            el:"#box2"
        })
    </script>
</body>
</html>